<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.5.1-rc.1/echarts.min.js"></script>

</head>

<body>

  <div id="main"></div>
  <style>
    #main {
      width: 800px;
      height: 500px;
    }
  </style>
  <script>
    var uploadedDataURL2 = '';
    var indicator = [
      { name: '尽责性', max: 100, num: 0 },
      { name: '外向性', max: 100, num: 1 },
      { name: '进取性', max: 100, num: 2 },
      { name: '情绪性', max: 100, num: 3 },
      { name: '宜人性', max: 100, num: 4 },
    ];
    const color = ['#bf5981', '#ef4242', '#fc7b35', '#08b1c2', '#9559ad']
    var dataValue = [43, 90, 80, 53, 78, 89, 77, 50]
    var dataArr = [
      {
        value: dataValue,
        name: '',
        itemStyle: {
          normal: {
            lineStyle: {
              color: '#17E7FF',
            },
            shadowColor: '#17E7FF',
            shadowBlur: 5,
          },
        },
      },
    ];
    function contains (arr, obj) {
      var i = arr.length;
      while (i--) {
        if (arr[i].name === obj) {
          return i;
        }
      }
      return false;
    }
    var num = 80;
    var option = {
      color: ['#17E7FF'],
      radar: {
        radius: '60%',
        shape: 'circle',
        name: {
          formatter: (value, index) => {
            console.log(index, value)
            let i = contains(indicator, value); // 处理对应要显示的样式
            return '{b|' + value + '}\n' + '{a|' + dataValue[i] + '}';
          },
          textStyle: {
            // padding:[10,15,10,15]
          },
          rich: {
            a: {
              align: 'center',
              color: '#fff',
              fontSize: 14,
              padding: [5, 20, 5, 20],
              backgroundColor: "#bf5980",
              borderRadius: 5,
            },
            b: {
              padding: [0, 0, 5, 0],
              align: 'center',
              color: '#bf5980',
              fontWeight: 500,
              fontSize: 18,
            },
            triggerEvent: true,//开启雷达图的边角名称可点击
          },
        },
        nameGap: 30,
        indicator: indicator,
        splitArea: {
          // 坐标轴在 grid 区域中的分隔区域，默认不显示。
          show: true,
        },
        
        
        axisLine: {
          lineStyle: {
            color: '#ccc', // 设置边框颜色
          },
        },
      },
      series: [
        {
          type: 'radar',
          symbolSize: 10,
          symbol: 'circle',
          data: dataArr,

          lineStyle: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: '#00D1FF',
                },
                {
                  offset: 1,
                  color: '#00A5FE',
                },
              ],
              false
            ),
            width: 1.4,
          },
        },
      ],
    };

    window.onload = function () {
      var chart = echarts.init(document.getElementById('main'));
      chart.setOption(option);
    }
  </script>
</body>

</html>